前情提要

說明了不論是工具人或是姐妹，都有存活的範疇，以及背後的原理。

我：累了，仔細回想起來，好像發現她沒回覆過我訊息。
工具人們：會不會只是你沒看到呢？
我：什麼意思？

各種console基本操作：

console它是一個object，我們能透過它的方法在網頁、node介面進行互動，並取得程式碼執行的結果。

基本中的console.log()

console.log()內可以放任何型別的內容，並且將它印出。

//各型別內容：
let x = "";
let x1 = 1;
let x2 = true;
let x3 = function(){return 1};
let x4 = [1,2,3,4];
let x5 = {name:"andy"};

console.log(x,x1,x2,x3,x4,x5);

除此之外，還有..

印出資料屬性與方法console.dir()

console.dir()可以查看屬性，以Object為例

console.dir(Object);

計算程式碼運行時間 console.time(),console.timeEnd()

time跟timeEnd需要輸入相同名稱，作為計時的範圍，會在timeEnd的部分，會回傳：1.計算名稱，2.時間長度

console.time("a part");
function cool(i){
    console.log("執行中")
    return i;
}
cool(1);
console.timeEnd("a part");

清除訊息 console.clear()

當你不需要的訊息量過多時，可以用console.clear()清除

接收特定訊息console.error()

可用於：

1. 拋出錯誤訊息
2. 接收Error型別的值

拋出錯誤訊息：

console.error("錯誤")

接收Error型別的值:

//正常內容
let x = 1;
let x1 = Error();
console.error(x,x1);

印出內容列表化 console.table

能將內容表格化，但只能用一個引數，印出內容須為array,object才會以表格化呈現。

let x = {name:"Andy",age:18,like:[1,2,3,4,5]};
let y = 5;
console.log(x,"我是log");
console.table(x,"我是table",y);

印出程式碼執行順序 console.trace()

依序印出你的執行順序

function first(){
    function second(){
        console.trace();
    }
    second();
}
first();

印出執行次數與內容 console.count()

可利用這個方法顯示執行的值與次數，如果沒有輸入，值的部分會顯示：default。

// console.count() method
for(let i=0;i<5;i++){
    console.count(i+2);
}

客製化訊息

1. 運用css上色%c：
   可添加css屬性，透過%c決定屬性套用的位置，讓印出訊息有更多變化性：

console.log("上色訊息： %c 這裡", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

2. 運用樣板字面值，讓你更彈性調整數值：
   添加的方式不止一種！搭配更彈性調整輸入值：

// Custom Console log example
  const spacing = '10px';
  const styles =
        `padding: ${spacing}; background-color: #68D7EA; color: #337ab7; font-style:
         italic; border: 1px solid black; font-size: 2em;`;
  console.log('%c鐵人賽倒數4天！', styles);

群組化group(),groupEnd()

筆者目前假想是：當你有很多回報內容要歸類為群組訊息，方便檢視時，就可以使用

使用前

console.log("使用前：");
console.log("群組頭");
console.log("內容1");
console.log("內容2");
console.log("群組結束")

使用group的寫法

console.log("使用後：");
console.group("群組頭");
console.log("內容1");
console.log("內容2");
console.groupEnd("群組結束");

比較一下，結果應該比較好閱讀吧？

工具人們：為了讓你早點放棄，偷偷告訴你吧，她其實還有一個交流頻繁的青梅竹馬。
我：？！！？？！！？

-- to be continued --

那今天就到這邊摟！
每天的休息，是為了後面的追求，明天見。

reference:

console in JavaScript
mdn
瀏覽器console.log()外的一些其他用法